<template>
  <a-card class="bootstrap-layout-demo">
    <!-- 容器类型展示 -->
    <a-card title="容器类型" class="demo-section mb-4">
      <div class="demo-container">
        <a-card
          v-for="container in containers"
          :key="container.class"
          :class="[container.class, 'container-item']"
          :body-style="{ padding: '16px' }"
        >
          <div class="container-label">{{ container.class }}</div>
          <div class="container-desc">{{ container.desc }}</div>
        </a-card>
      </div>
    </a-card>

    <!-- 栅格系统展示 -->
    <a-card title="栅格系统" class="demo-section mb-4">
      <a-collapse v-model:activeKey="gridActiveKeys" accordion>
        <!-- 等宽列 -->
        <a-collapse-panel key="equal-width" header="等宽列">
          <a-row>
            <a-col v-for="n in 3" :key="n" :span="24 / 3" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">.col</div>
              </div>
            </a-col>
          </a-row>
        </a-collapse-panel>

        <!-- 指定列宽 -->
        <a-collapse-panel key="specified-width" header="指定列宽">
          <a-row>
            <a-col :span="16" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">.col-8</div>
              </div>
            </a-col>
            <a-col :span="8" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">.col-4</div>
              </div>
            </a-col>
          </a-row>
        </a-collapse-panel>

        <!-- 响应式栅格 -->
        <a-collapse-panel key="responsive-grid" header="响应式栅格">
          <a-row>
            <a-col v-for="n in 4" :key="n" :xs="24" :sm="12" :md="8" :lg="6" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">
                  <div>.col-sm-6</div>
                  <div>.col-md-4</div>
                  <div>.col-lg-3</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-collapse-panel>

        <!-- 嵌套栅格 -->
        <a-collapse-panel key="nested-grid" header="嵌套栅格">
          <a-row>
            <a-col :span="16" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">
                  .col-8
                  <a-row :gutter="[8, 8]" class="mt-3">
                    <a-col :span="12" class="demo-grid-col">
                      <div class="demo-grid-cell-inner">
                        <div class="cell-content">.col-6 (嵌套)</div>
                      </div>
                    </a-col>
                    <a-col :span="12" class="demo-grid-col">
                      <div class="demo-grid-cell-inner">
                        <div class="cell-content">.col-6 (嵌套)</div>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-col>
            <a-col :span="8" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">.col-4</div>
              </div>
            </a-col>
          </a-row>
        </a-collapse-panel>

        <!-- 列偏移 -->
        <a-collapse-panel key="column-offset" header="列偏移">
          <a-row>
            <a-col :md="8" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">.col-md-4</div>
              </div>
            </a-col>
            <a-col :md="8" :offset="8" class="demo-grid-col">
              <div class="demo-grid-cell">
                <div class="cell-content">.col-md-4 .offset-md-4</div>
              </div>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
    </a-card>

    <!-- 间距工具类 -->
    <a-card title="间距工具类" class="demo-section mb-4">
      <a-tabs v-model:activeKey="spacingActiveKey">
        <a-tab-pane key="margin" tab="外边距 (Margin)">
          <a-space size="large">
            <a-card v-for="size in 5" :key="`m-${size}`" :class="`m-${size}`" class="demo-spacing-card">
              <template #title>.m-{{ size }}</template>
              <div>margin: {{ getSpacingValue(size) }}</div>
            </a-card>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="padding" tab="内边距 (Padding)">
          <a-space size="large">
            <a-card v-for="size in 5" :key="`p-${size}`" :class="`p-${size}`" class="demo-spacing-card">
              <template #title>.p-{{ size }}</template>
              <div>padding: {{ getSpacingValue(size) }}</div>
            </a-card>
          </a-space>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <!-- 对齐方式 -->
    <a-card title="对齐方式" class="demo-section mb-4">
      <a-tabs v-model:activeKey="alignmentActiveKey">
        <a-tab-pane key="vertical" tab="垂直对齐">
          <a-space direction="vertical" size="middle">
            <a-card title=".align-items-start" class="demo-alignment-card">
              <a-row align="top" class="demo-alignment-row">
                <a-col v-for="n in 3" :key="n" :span="8" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item {{ n }}</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <a-card title=".align-items-center" class="demo-alignment-card">
              <a-row align="middle" class="demo-alignment-row">
                <a-col v-for="n in 3" :key="n" :span="8" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item {{ n }}</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <a-card title=".align-items-end" class="demo-alignment-card">
              <a-row align="bottom" class="demo-alignment-row">
                <a-col v-for="n in 3" :key="n" :span="8" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item {{ n }}</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="horizontal" tab="水平对齐">
          <a-space direction="vertical" size="middle">
            <a-card title=".justify-content-start" class="demo-alignment-card">
              <a-row justify="start" class="demo-alignment-row">
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 1</div>
                  </div>
                </a-col>
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 2</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <a-card title=".justify-content-center" class="demo-alignment-card">
              <a-row justify="center" class="demo-alignment-row">
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 1</div>
                  </div>
                </a-col>
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 2</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <a-card title=".justify-content-end" class="demo-alignment-card">
              <a-row justify="end" class="demo-alignment-row">
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 1</div>
                  </div>
                </a-col>
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 2</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <a-card title=".justify-content-between" class="demo-alignment-card">
              <a-row justify="space-between" class="demo-alignment-row">
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 1</div>
                  </div>
                </a-col>
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 2</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
            <a-card title=".justify-content-around" class="demo-alignment-card">
              <a-row justify="space-around" class="demo-alignment-row">
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 1</div>
                  </div>
                </a-col>
                <a-col :span="6" class="demo-grid-col">
                  <div class="demo-grid-cell">
                    <div class="cell-content">Item 2</div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-space>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-card>
</template>

<script setup>
import { ref } from "vue";

const gridActiveKeys = ref(["equal-width"]);
const spacingActiveKey = ref("margin");
const alignmentActiveKey = ref("vertical");

const containers = [
  { class: "container", desc: "响应式固定宽度" },
  { class: "container-fluid", desc: "全宽" },
  { class: "container-sm", desc: "≥576px" },
  { class: "container-md", desc: "≥768px" },
  { class: "container-lg", desc: "≥992px" },
  { class: "container-xl", desc: "≥1200px" },
  { class: "container-xxl", desc: "≥1400px" },
];

const getSpacingValue = (size) => {
  const values = {
    1: "0.25rem",
    2: "0.5rem",
    3: "1rem",
    4: "1.5rem",
    5: "3rem",
  };
  return values[size];
};
</script>

<style scoped>
.bootstrap-layout-demo {
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.demo-section {
  border-radius: 6px;
  margin-bottom: 24px;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.container-item {
  transition: all 0.3s ease;
  border-radius: 6px;
  color: white;
}

.container-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.container-label {
  font-weight: 500;
  font-size: 16px;
}

.container-desc {
  font-size: 14px;
  opacity: 0.9;
}

.demo-grid-col {
  padding: 8px;
}

.demo-grid-cell {
  background-color: #f0f5ff;
  border: 1px solid #d6e4ff;
  border-radius: 4px;
  padding: 16px;
  height: 100%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

.demo-grid-cell:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
}

.demo-grid-cell-inner {
  background-color: #e6fffb;
  border: 1px solid #87e8de;
  border-radius: 4px;
  padding: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell-content {
  text-align: center;
  font-size: 14px;
  color: #314659;
}

.demo-spacing-card {
  width: 150px;
  text-align: center;
  border-radius: 6px;
}

.demo-alignment-card {
  border-radius: 6px;
}

.demo-alignment-row {
  min-height: 100px;
  background-color: #fafafa;
  border-radius: 4px;
  padding: 8px;
}

/* 容器特定样式 */
.container {
  background-color: #1890ff;
}
.container-fluid {
  background-color: #52c41a;
}
.container-sm {
  background-color: #13c2c2;
}
.container-md {
  background-color: #faad14;
}
.container-lg {
  background-color: #f5222d;
}
.container-xl {
  background-color: #722ed1;
}
.container-xxl {
  background-color: #314659;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .demo-grid-cell {
    padding: 12px;
    min-height: 60px;
  }

  .cell-content {
    font-size: 12px;
  }
}
</style>
